<template>
  <el-dialog :title="form.name + '纪念馆设置'" :visible.sync="open" width="900px" append-to-body>
    <el-form ref="setting-form" :model="form" label-width="100px">
      <el-form-item label="公开纪念馆">
        <el-radio-group v-model="form.isOpen">
          <el-radio
              v-for="dict in dictOpen"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-tabs type="border-card" v-model="tabName">
        <el-tab-pane label="背景音乐" name="tab1">
          <el-table :data="musicList">
            <el-table-column label="编号" align="center" type="index"/>
            <el-table-column label="音乐名称" align="center" prop="name"/>
            <el-table-column label="音乐" align="center" width="450">
              <template slot-scope="scope">
                <audio-player ref="audio" :the-control-list="controlParam"
                              :theUrl="baseImageUrl + scope.row.url"></audio-player>
              </template>
            </el-table-column>
            <el-table-column label="选择" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-checkbox :checked="form.musicId === scope.row.musicId" v-model="form.musicId"
                             :true-label="scope.row.musicId"></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="首页背景" name="tab2">
          <el-table :data="indexList">
            <el-table-column label="编号" align="center" type="index"/>
            <el-table-column label="图片" align="center">
              <template slot-scope="scope">
                <el-image style="width: 100px; height: 100px"
                          :preview-src-list="[baseImageUrl + scope.row.url]"
                          :src="baseImageUrl + scope.row.url"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="选择" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-checkbox :checked="form.indexBackgroundId === scope.row.indexBackgroundId"
                             v-model="form.indexBackgroundId"
                             :true-label="scope.row.indexBackgroundId"></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="祭扫背景" name="tab3">
          <el-table :data="worshipList">
            <el-table-column label="编号" align="center" type="index"/>
            <el-table-column label="图片" align="center">
              <template slot-scope="scope">
                <el-image style="width: 100px; height: 100px"
                          :preview-src-list="[baseImageUrl + scope.row.url]"
                          :src="baseImageUrl + scope.row.url"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="选择" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-checkbox :checked="form.worshipBackgroundId === scope.row.worshipBackgroundId"
                             v-model="form.worshipBackgroundId"
                             :true-label="scope.row.worshipBackgroundId"></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {updateHallSetting} from "@/api/service/hall";
  import AudioPlayer from '@/components/AudioPlayer';
  import {listMusic} from "@/api/service/music";
  import {listBackground as getIndexList} from "@/api/service/index-background";
  import {listBackground as getWorshipList} from "@/api/service/worship-background";

  export default {
    name: "setting",
    components: {
      AudioPlayer
    },
    data() {
      return {
        baseImageUrl: process.env.VUE_APP_BASE_API,
        open: false,
        form: {},
        musicList: [],
        tempMusicList: [],
        controlParam: 'noMuted noVolume onlyOnePlaying noSpeed',
        indexList: [],
        worshipList: [],
        tabName: 'tab1'
      }
    },
    props: {
      dictOpen: {
        type: Array,
        default() {
          return []
        }
      }
    },
    methods: {
      /* 显示弹窗 */
      show(row) {
        this.open = true;
        this.form = Object.assign({}, row)
        this.form.isOpen = this.form.isOpen.toString()
      },
      /** 查询背景音乐列表 */
      getMusicList() {
        listMusic().then(response => {
          this.tempMusicList = response.rows;
        });
      },
      /** 查询纪念馆背景图片列表 */
      getIndexList() {
        getIndexList().then(response => {
          this.indexList = response.rows;
        });
      },
      /** 查询祭扫背景图片列表 */
      getWorshipList() {
        getWorshipList().then(response => {
          this.worshipList = response.rows;
        });
      },
      /** 提交按钮 */
      submitForm() {
        updateHallSetting(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.$emit("refresh")
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
    },
    watch: {
      open(val) {
        if (!val) {
          this.musicList = []
          this.tabName = 'tab1'
        } else {
          this.musicList = this.tempMusicList;
        }
      }
    },
    mounted() {
      this.getMusicList();
      this.getIndexList();
      this.getWorshipList();
    }
  }
</script>

<style scoped>

</style>
